<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/jquery-ui-timepicker-addon.css"/>
    <link rel="stylesheet" href="css/jquery-ui.css"/>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/city-picker.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/jquery-impromptu.min.css" type="text/css"/>
    <title>Document</title>
</head>
<body>
<div id="dataLoad" style="display:none; position: fixed; width: 100%; top: 20%; z-index: 1001;">
       <table width=100% height=100% border=0 align=center valign=middle>
        <tr height=50%><td align=center>&nbsp;</td></tr>
        <tr><td align=center><img src="images/loading.gif"/></td></tr>
        <tr><td align=center>初始化中，请稍后......</td></tr>
        <tr height=50%><td align=center>&nbsp;</td></tr>
       </table>
     </div>
<div id="loan_fee_dlg" class="mt10" style="display: none" title="借款信息确认">
    <div class="box">
        <div class="box_border">
            <div class="box_center"></div>
            <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="td_center">是否借款：</td>
                    <td class="">
                        <input type="radio" name="hasLoanFee" value="1"> 是
                        <input type="radio" name="hasLoanFee" value="0" checked> 否
                    </td>
                </tr>
                <tr class="loan_fee_area" style="display:none">
                    <td class="td_center" valign="top">借款单号：</td>
                    <td class="">
                        <select name="" class="select" id="loan_fee_id">
                        </select>
                    </td>
                </tr>
                <tr class="loan_fee_area" style="display:none">
                    <td class="td_center" valign="top">借款金额：</td>
                    <td class="">
                        <input type="text" name="name" class="input-text lh25" size="10" disabled id="loan_amount">
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div id="confirm_fee_dlg" class="mt10" style="display: none" title="最终信息确认">
    <div class="box">
        <div class="box_border">
            <div class="box_center"></div>
            <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="td_center" valign="top">现金报账：</td>
                    <td class="">
                        <input type="number" value="0" name="name" class="input-text lh25" size="10" id="cash_amonut">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_center" valign="top">公务卡报账：</td>
                    <td class="">
                        <input type="number" value="0" name="name" class="input-text lh25" size="10" id="official_amount">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_center" valign="top">转账金额：</td>
                    <td class="">
                        <input type="number" value="0" name="name" class="input-text lh25" size="10" id="transform_amount">
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_center" valign="top">当前总额：</td>
                    <td class="">
                        <input type="number" value="0" name="name" class="input-text lh25" size="10" id="total_final_amount" disabled>
                        <span></span>
                    </td>
                </tr>
                <tr>
                    <td class="td_center" valign="top">预报总额：</td>
                    <td class="">
                        <input type="number" name="name" class="input-text lh25" size="10" id="pre_final_amount" disabled>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="container">
    <div id="forms" class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_top"><b class="pl15">报销人信息</b></div>
                <div class="box_center">
                    <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="td_right">所属部门：</td>
                            <td class="">
                                <input type="text" placeholder="请输入所属部门" class="input-text lh25" size="20" id="baoxiao_depart" disabled>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_right">姓名：</td>
                            <td class="">
                                <input type="text" placeholder="请输入人员姓名" class="input-text lh25" size="20" id="baoxiao_name" disabled>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="search_bar" class="mt10">
        <div class="box">
            <div class="box_border">
                <div class="box_top"><b class="pl15">报销项目</b></div>
                <div class="box_center pt10 pb10">
                    <table class="form_table" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>费用项目</td>
                            <td>
                                <input type="text" placeholder="具体费用项目名称"  name="XM_name"
                                       class="input-text 1h25" size="20" id="XM_name" value="">
                            </td>
                            <td>所属类别</td>
                            <td>
                                 <span class="fl">
                      <div class="select_border">
                          <div class="select_containers ">
                              <select name="" class="select" id="xiangmu_select">
                              </select>
                          </div>
                      </div>
                    </span>
                            </td>
                            <td>
                                填报金额
                            </td>
                            <td>
                                <input type="number" placeholder="填报申请金额"  name="tianbao_jine"
                                       class="input-text 1h25" size="20" id="XM_tianbaojine">
                            </td>
                            <td id="add_xiangmu">
                                <a class="ext_btn" ><span class="add"></span>添加</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="table" class="mt10">
                    <div class="box span10 oh">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table" id="xiangmu_table">
                            <tr>
                                <th class="td_center" style="width: 15%">序号</th>
                                <th class="td_center" style="width: 17.5%">项目名称</th>
                                <th class="td_center" style="width: 17.5%">项目类型</th>
                                <th class="td_center" style="width: 17.5%">填报金额</th>
                                <th class="td_center" style="width: 15%">操作</th>
                            </tr>
                            <tr>
                                <td class="td_right" colspan="4">合计金额</td>
                                <td class="td_center"><span id="total_fee">0</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="box_bottom pb5 pt5 pr10" style="border:1px solid #dadada;">
                <div class="search_bar_btn" style="text-align:right;">
                    <input type="button" name="button" class="btn1 btn82 btn_count" id="confirm_btn" value="提交" >
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/baoxiao.js"></script>
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<script type="text/javascript">
    //用于保存选择的项目的数组
    var xiangmu={'data':[]};
    var curIndex = 0;

    var loan_fee_data = [];

    //最终确认输入按钮
    var final_input = true;


    //辅助函数，用于默认用户数据
    function defaultInfo(){
        var curUser = JSON.parse(window.localStorage.getItem('user_info'));
        var curDepart = window.localStorage.getItem('cur_department');
        $('#baoxiao_depart').val(curUser.department_info[curDepart].department_name);
        $('#baoxiao_name').val(curUser.user_name);
        xiangmu.user_id = curUser.user_id;
        xiangmu.section_id = curUser.department_info[curDepart].department_id;
        xiangmu.history_fee_id = window.localStorage.getItem('history_ordinary_fee_id');
    }

    //辅助函数，获取报销项目
    function getFeeItem(){
        $('#xiangmu_select').empty();
        $('#dataLoad').show();
        $.get(url + 'Common/GetFeeItem.php', function(data){
            var t = JSON.parse(data);
            $('#dataLoad').hide();
            if(t.state == 1){
                for(var i = 0; i < t.data.length; i++){
                    $('#xiangmu_select').append("<option value='" + t.data[i].id + "'>" + t.data[i].name + "</option>");
                }
            }
            else{
                $.prompt("<h3>网络繁忙，请稍后再试</h3>", {
                    title: '错误提醒',
                    buttons: {'确定': true},
                    submit: function(e, v, m, f){
                        if(v){
                            jumpPage('guide.html');
                        }
                    }
                })
            }
        })
    }


    //辅助函数，处理数据
    function processFeeData(){
        var  inputProText=$('#XM_name').val();
        var  checkproText=$('#xiangmu_select').find("option:selected").text();
        var  inputApplymoneyText=$('#XM_tianbaojine').val();
        if(inputProText == '' || inputApplymoneyText == '' || parseFloat(inputApplymoneyText) == 'NaN'){
            return false;
        }
        xiangmu.data[curIndex] = {
            'fee_item' : inputProText,
            'fee_type' : $('#xiangmu_select').val(),
            'money' : inputApplymoneyText,
            'fee_type_text' : checkproText
        };
        return true;
    }
    //辅助函数，当添加用户按钮按下的时候
    function Addpro(){
        $('#add_xiangmu').click(function(){
            var r = processFeeData();
            if(!r){
                $.prompt('<h3>金额填写错误或未填写费用项目，请检查</h3>',{
                    title: '错误提醒',
                    buttons: {'确定': true}
                })
                return;
            }
            //获取最新的index，即项目数量
            $('#xiangmu_table').find('tr').last().before("<tr class='tr user_tr'>" +
                    "<td class='td_center'>"+(curIndex+1)+"</td>" +
                    "<td class='td_center'>"+xiangmu.data[curIndex]['fee_item']+"</td>" +
                    "<td class='td_center'>"+xiangmu.data[curIndex]['fee_type_text']+"</td>" +
                    "<td class='td_center'>"+xiangmu.data[curIndex]['money']+"</td>" +
                    "<td class='td_center'><a href='' class='ext_btn btn_del'><span class='del'></span>删除</a></td></td>" +
                    "</tr>");
            curIndex++;
            clearData(false);
            countTotal();

            $('.btn_del').last().click(function(e){
                var id = $(this).parent().parent().find('td').eq(0).text();
                xiangmu.data.splice(id - 1, 1);
                curIndex--;
             //   alert(JSON.stringify(xiangmu.data));
                $(this).parent().parent().remove();
                $('.user_tr').each(function(index){
                    $(this).children('td').eq(0).text(index+1);
                });
                countTotal();

                e.preventDefault();
            });


        })
    }
    //辅助函数，统计金额
    function countTotal(){
        var total=0;
        for(var i=0;i<xiangmu.data.length;i++){
            total=total+parseFloat(xiangmu.data[i]['money']);
        }
        xiangmu.total_money = total;
        $('#total_fee').text(total.toFixed(2).toString());
    }

    //辅助函数，上传数据
    function uploadData(){
        $('#dataLoad').show();
        $.post(url + 'OrdinaryFee/CreateOrdinaryFee.php', xiangmu, function(data){
            $('#dataLoad').hide();
            var t = JSON.parse(data);

            if(t.state == 1){
                $.prompt( "<h3>提交成功，请耐心等待审批，您可在\"我的报销\"中查看审批结果 </h3>",{
                    title: '消息提醒',
                    buttons: {'确定': true},
                    submit: function(e, v, m, f){
                        if(v){
                            jumpPage('my_fee_apply.html');
                        }
                    }
                });
            }
            else if (t.state == 2){
                $.prompt( "<h3>当前部门没有足够的报销经费，请联系财务人员追加经费</h3>",{
                    title: '消息提醒',
                    buttons: {'确定': true},
                    submit: function(e, v, m, f){
                        if(v){
                            jumpPage('my_fee_apply.html');
                        }
                    }
                });
            }
            else {
                $.prompt( "<h3>网络或数据库错误，请稍后再试</h3>",{
                    title: '错误提醒',
                    buttons: {'确定': true}
                });
            }
        })
    }


    //辅助函数，清空所有数据
    function clearData(all){
        $('#XM_tianbaojine').val('');
        $('#XM_name').val('');
        if(all){
            //清空Table
            $('.user_tr').remove();
            xiangmu={'data':[]};
            curIndex = 0;

            $('#total_fee').text('0');
        }

    }
    //辅助函数，处理是否借款
    function getLoanFeeID(){
        $('#dataLoad').show();
        $.get(url + 'LoanFee/GetLoanFeeIDByUser.php', {'user_id': xiangmu.user_id, 'section_id':xiangmu.section_id}, function(d){
            $('#dataLoad').hide();
            var t = JSON.parse(d);
            if(t.state == 1){
                loan_fee_data = t.data;
                for(var i = 0; i < loan_fee_data.length; i++){
                    $('#loan_fee_id').append("<option value=" + loan_fee_data[i].money + ">"
                            + loan_fee_data[i].loan_money_ID + "</option>");
                }
                $('#loan_amount').val(loan_fee_data[0].money);

            }

        })
    }

    //辅助函数，处理是否借款按钮
    function isLoanFee(){
        $('input[name="hasLoanFee"]').click(function(){
            var v = $('input[name="hasLoanFee"]:checked').val();
            if(v == 1){
                $('.loan_fee_area').show();
            }
            else{
                $('.loan_fee_area').hide();
            }
        });
    }

    //辅助函数，处理借款信息
    function getLoanFeeData(){
        var v = $('input[name="hasLoanFee"]:checked').val();
        if(v == 1){
            xiangmu.isLoanFee = 1;
            xiangmu.loanMoney = $('#loan_fee_id option:selected').val();
            xiangmu.loanFeeID = $.trim($('#loan_fee_id option:selected').text());//loan_fee_data[0].loan_money_ID;
        }
        else{
            xiangmu.isLoanFee = 0;
            xiangmu.loanMoney = 0;
            xiangmu.loanFeeID = '';
        }

    }



    //获取最终信息
    function getFinalFee(){
        if(!final_input){
            return -2;
        }
        var cash = parseFloat($('#cash_amonut').val());
        var official = parseFloat($('#official_amount').val());
        var trans = parseFloat($('#transform_amount').val());

        if( (cash + official + trans) != xiangmu.total_money){
            return -1;
        }

        xiangmu.cash = cash;
        xiangmu.offical = official;
        xiangmu.trans = trans;

      //  console.log(JSON.stringify(xiangmu));

        return 1;


    }

    //辅助函数，显示最终信息
    function processFinalFeeApp(){
        $('#pre_final_amount').val(xiangmu.total_money);
        $('#confirm_fee_dlg').dialog({
            resizable: false,
            height: "auto",
            width: "auto",
            modal: true,
            buttons: {
                '确定' :function(){
                    $(this).dialog("close");
                    var r= getFinalFee();
                    if(r == -2){
                        $.prompt( "<h3>数据格式有误，请修改</h3>",{
                            title: '错误提醒',
                            buttons: {'确定': true}
                        });
                    }
                    else if(r == -1){
                        $.prompt( "<h3>报销金额不等于预报总金额，请修改</h3>",{
                            title: '错误提醒',
                            buttons: {'确定': true}
                        });
                    }
                    else{
                        console.log(JSON.stringify(xiangmu));
                        uploadData();
                        $(this).dialog("close");
                    }

                },
                '取消': function(){
                    $(this).dialog("close");
                }
            }
        })
    }


    //辅助函数，处理借款单号
    function  processLoanFee(){
        if(loan_fee_data.length == 0){
            xiangmu.isLoanFee = 0;
            xiangmu.loanMoney = 0;
            xiangmu.loanFeeID = '';
            processFinalFeeApp();
        }
        else{
            $('#loan_fee_dlg').dialog({
                resizable: false,
                height: "auto",
                width: "auto",
                modal: true,
                buttons: {
                    '确定' :function(){
                        $(this).dialog("close");
                        getLoanFeeData();
                        processFinalFeeApp();
                    },
                    '取消': function(){
                        $(this).dialog("close");
                    }
                }
            });
        }
    }

    $(function(){
        //设置默认用户
        defaultInfo();
        //获取报销项目
        getFeeItem();
        //添加新的报销项目
        Addpro();
        getLoanFeeID();

        isLoanFee();
        //selectLoanFee();
        processFinalInput();
        //处理确定按钮
        $('#confirm_btn').click(function(){
            if(curIndex == 0){
                $.prompt( "<h3>您还没有添加任何报销数据，请添加后提交</h3>",{
                    title: '错误提醒',
                    buttons: {'确定': true}
                });
                return;
            }
            processLoanFee();

        });



        //处理重置按钮
        $('#reset_btn').click(function(e){
            clearData(true);
            e.preventBubble();
        })
    });




</script>
</html>